<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="../../static/img/2.png"></image>
		<image class="img-b" src="../../static/img/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2" @click="goLogin()">欢迎使用文理帮APP</view>
		<form class="cl">
			<view class="t-a">
				<image src="../../static/img/sj.png"></image>
				<view class="line"></view>
				<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="phone" />
			</view>
			<view class="t-a">
				<image src="../../static/img/yz.png"></image>
				<view class="line"></view>
				<input type="password" name="code" maxlength="6" placeholder="请输入密码" v-model="password" />
			</view>
			<view class="t-a" v-if="isRegister">
				<image src="../../static/img/yz.png"></image>
				<view class="line"></view>
				<input type="password" name="code" maxlength="6" placeholder="请再次输入密码" v-model="secondPassword" />
			</view>
			<button @tap="login()" v-if="!isRegister">登 录</button>
			<button @tap="confirmRegister()" v-if="isRegister">注 册</button>
			<view class="action-box" v-if="!isRegister">
				<view class="bottom-text register" @click="register">没有账号？马上注册</view>
			</view>
			<view class="action-box" v-if="isRegister">
				<view class="bottom-text register" @click="goLogin">返回登录</view>
			</view>
		</form>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				phone: '', //手机号码
				password: '',
				secondPassword: '',
				isRegister: false
			};
		},
		onLoad() {},
		methods: {

			//当前登录按钮操作
			login() {
				const that = this;
				if (!that.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.showToast({ title: '请输入正确手机号', icon: 'none' });
					return;
				}
				if (!that.password) {
					uni.showToast({ title: '请输入密码', icon: 'none' });
					return;
				}

				let data = {
					userphone: that.phone,
					password: that.password
				}
				this.$http('post', 'api/public/login', {
					data,
					success: (res) => {
						this.$store.dispatch('setLoginStste', res)
						uni.switchTab({
							url: '/pages/index/index'
						})
					},
					successMsg: '登录成功'
				})


			},


			register() {
				this.isRegister = true
				this.title = '欢迎注册!'
				this.phone = ''
				this.password = ''
				this.secondPassword = ''
			},

			goLogin() {
				this.isRegister = false
				this.title = '欢迎回来！'
				this.phone = ''
				this.password = ''
				this.secondPassword = ''
			},
			confirmRegister() {
				const that = this;
				if (!that.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.showToast({ title: '请输入正确手机号', icon: 'none' });
					return;
				}
				if (!that.password) {
					uni.showToast({ title: '请输入密码', icon: 'none' });
					return;
				}
				if (!that.secondPassword) {
					uni.showToast({ title: '请再次输入密码', icon: 'none' });
					return;
				}


				if (that.password !== that.secondPassword) {
					uni.showToast({ title: '两次密码不一致，请再次确认密码', icon: 'none' });
					return;
				}
				let data = {
					userphone: that.phone,
					password: that.password
				}

				this.$http('post', 'api/public/users/register', {
					data,
					success: (res) => {
						setTimeout(() => {
							this.goLogin()
						}, 1000)

					},
					successMsg: '注册成功，请登录后使用文理帮'
				})
			}
		}
	};

</script>
<style>
	.img-a {
		position: absolute;
		width: 150px;
		top: -20px;
		right: 0;
		height: 150px;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		width: 150px;
		height: 150px;
	}

	.t-login {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}

	.t-login button {
		font-size: 28rpx;
		background: rgb(118, 118, 238);
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 120rpx 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.bottom-text {
		font-size: 14px;
		color: #777777;
		line-height: 36rpx;
		margin-top: 30rpx;
		text-align: center;
	}

</style>

